<template>
	<view class="main-box">
		<scroll-view scroll-y="true" class="scroll-view-box">
			<template v-for="(item, index) in infoData" :key="index">
				<view class="form-box" v-if="item.type != '03'">
					<view class="divider-title">
						{{ item.label }}
					</view>
					<up-form labelWidth="83" labelAlign="left" v-if="item.type == '01'">
						<template v-for="(j, k) in item.data" :key="k">
							<up-form-item :label="j.label + '：'" :labelPosition="j.label.length > 9 ? 'top' : ''"
								:labelWidth="j.label.length > 9 ? '100%' : ''">
								<view class="border-box">
									{{ j.value }}
								</view>
							</up-form-item>
						</template>
					</up-form>
					<table-list v-else-if="item.type == '02'" :list="item.data"></table-list>
				</view>
				<template v-if="item.type == '03'">
					<up-modal :show="accessoryShow" title="查看附件" @confirm="accessoryShow = false">
						<scroll-view scroll-y="true" class="scroll-view-affix slot-content">
							<up-form labelWidth="100%" labelPosition="top" labelAlign="center">
								<up-form-item :key="index" v-for="(item, index) in item.data">
									<view class="border-box item" @click="goToPage(item.value)">{{ item.label }}</view>
								</up-form-item>
							</up-form>
						</scroll-view>
					</up-modal>
				</template>
			</template>
		</scroll-view>
		<view class="fixed-btn">
			<up-button type="primary" text="审批" shape="circle" @click="showSubmit = true" :disabled="isSub"></up-button>
			<up-button type="primary" text="退回" shape="circle" @click="showRollBack = true"
				:disabled="isBack"></up-button>
			<up-button type="primary" :text="`附件(${accessoryNum})`" :disabled="accessoryNum == 0 ? true : false"
				shape="circle" @click="accessoryShow = true"></up-button>
		</view>
		<up-modal :show="showSubmit" contentTextAlign="center " title="审批信息" :showCancelButton="true"
			@confirm="confirmSubmit" @cancel="showSubmit = false">
			<view class="conten-box">
				<up-form labelPosition="top" labelWidth="100%">
					<up-form-item label="快捷输入">
						<div class="select-box">
							<uni-data-select placeholder="请选择快捷输入" :clear="true" v-model="submitSelectValue"
								:localdata="submitData" @change="submitSelectChange"></uni-data-select>
							<view type="link" class="link-btn" @click="goToPhrase">
								快捷输入管理
							</view>
						</div>
					</up-form-item>
					<up-form-item label="审批意见">
						<!-- <up-input v-model="submitValue" placeholder="请输入审批意见"></up-input> -->
						<up-textarea v-model="submitValue" placeholder="请输入审批意见"></up-textarea>
					</up-form-item>
				</up-form>
			</view>
		</up-modal>
		<up-modal :show="showRollBack" :showCancelButton="true" @confirm="confirmRollBack" title="回退节点信息"
			@cancel="showRollBack = false">
			<view class="slot-content">
				<up-radio-group v-model="radiovalue1" placement="row">
					<up-radio :label="item.label" :name="item.id" v-for="(item, index) in nodeData" :key="index">
					</up-radio>
				</up-radio-group>
				<!-- <up-input v-model="rollBackValue" placeholder="请输入审批意见"></up-input> -->
			
			<up-form labelPosition="top" labelWidth="100%">
				<up-form-item label="快捷输入">
					<div class="select-box">
						<uni-data-select placeholder="请选择快捷输入" :clear="true" v-model="rollBackSelectValue"
							:localdata="backData" @change="backSelectChange"></uni-data-select>
						<view type="link" class="link-btn" @click="goToPhrase">
							快捷输入管理
						</view>
					</div>
				</up-form-item>
				<up-form-item label="审批意见">
					<!-- <up-input v-model="submitValue" placeholder="请输入审批意见"></up-input> -->
					<up-textarea v-model="rollBackValue" placeholder="请输入审批意见"></up-textarea>
				</up-form-item>
			</up-form>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		rollBack,
		approveSubmit,
		getFormInfo,
		getReturnNode,
		getApprovalOpinions,
	} from "@/api"

	import {
		useRouter
	} from '@/uni-simple-router';
	const router = useRouter();

	let accessoryShow = ref(false)
	let submitSelectValue = ref("")
	let rollBackSelectValue = ref("")
	let radiovalue1 = ref('');

	let submitSelectChange = (v) => {
		submitValue.value = v
	}
	let backSelectChange = (v) => {
		rollBackValue.value = v
	}

	let submitValue = ref('')
	let rollBackValue = ref('')

	let guid = ref('');
	let type = ref('');
	let isBack = ref(true);
	let isSub = ref(true);
	onLoad((option) => {
		type.value = option.m;
		guid.value = option.guid;
		isBack.value = option.n == 'start' || option.v != 'ToDoTask' ? true : false;
		isSub.value = option.v != 'ToDoTask' ? true : false;
		uni.setNavigationBarTitle({
			title: option.t ? option.t : ''
		});
		backNode()
		dataAll();
	})
	let loadStartSubmit = true;
	let loadStartRollback= true;
	onShow(()=>{
		getAllData();
	})
	
	let getAllData = () => {
		let userInfo = uni.getStorageSync('userInfo') || {};
		getApprovalOpinions(userInfo.userId + ":submit").then(res => {
			if (res.code == '200') {
				submitData.splice(0, submitData.length);
				let list = JSON.parse(res.data);
				for(let i=0;i<list.length;i++) {
					list[i]['text'] = list[i].value
				}
				if (loadStartSubmit) {
					// loadStartSubmit = false;
					let defaultObj = list.find(item => {
						return item.state == '1'
					})
					if (defaultObj) {
						submitValue.value = submitSelectValue.value = defaultObj.value
					}
				}
				console.log(list);
				submitData.push(...list);
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
		getApprovalOpinions(userInfo.userId + ":rollback").then(res => {
			if (res.code == '200') {
				backData.splice(0, backData.length);
				let list = JSON.parse(res.data);
				for(let i=0;i<list.length;i++) {
					list[i]['text'] = list[i].value
				}
				if (loadStartRollback) {
					// loadStartRollback = false;
					let defaultObj = list.find(item => {
						return item.state == '1'
					})
					if (defaultObj) {
						rollBackValue.value = rollBackSelectValue.value = defaultObj.value
					}
				}
				backData.push(...list)
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
	}
	let submitData = reactive([])
	let backData = reactive([])
	
	let infoData = ref([]);
	let accessoryNum = ref(0);
	let dataAll = () => {
		uni.showLoading({
			title: '加载中'
		});
		getFormInfo({
			guid: guid.value,
			F_MDL: type.value
		}).then(res => {
			if (res.code == 200) {
				let data = JSON.parse(res.data);
				console.log('ddddddddd', data);
				infoData.value = data;
				let accessoryList = data.find(item => {
					return item.type == '03'
				})
				if (accessoryList) {
					accessoryNum.value = accessoryList.data.length;
				}
			} else {
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 3000
				})
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
	}

	let nodeData = ref([])
	let backNode = () => {
		getReturnNode(guid.value).then(res => {
			if (res.code == 200) {
				let data = JSON.parse(res.data);
				nodeData.value = data

				// infoData.value = data;
			}
		})
	}

	let goToPage = (t) => {
		console.log('tttt', t);

		// uni.setStorageSync('url',t);
		// router.push({ path: "/preview"});
		uni.downloadFile({
			url: t,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success: (saveRes) => {
							console.log('文件保存成功，保存路径为：', saveRes.savedFilePath);
						},
						fail: (saveErr) => {
							console.log('文件保存失败：', saveErr);
						}
					});
				}
			},
			fail: (err) => {
				console.log('文件下载失败：', err);
			}
		});
	}

	let showSubmit = ref(false);
	let showRollBack = ref(false);
	let userInfo = uni.getStorageSync('userInfo') || {};
	let confirmSubmit = () => {

		if (!submitValue.value) {
			uni.showToast({
				title: "请填写审批意见",
				icon: "none",
				duration: 3000
			})
			return
		}
		approveSubmit({
			guid: guid.value,
			userId: userInfo.userId,
			userName: userInfo.userName,
			procNote: submitValue.value,
			mdl: type.value
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "提交成功",
					icon: "none",
					duration: 3000
				})
				uni.navigateBack({
					delta: 1,
				})
				isSub.value = true;
				isBack.value = true;
			} else {
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 3000
				})
			}
			showSubmit.value = false;
		})
	}

	let confirmRollBack = () => {
		if (!rollBackValue.value) {
			uni.showToast({
				title: "请填写审批意见",
				icon: "none",
				duration: 3000
			})
			return;
		}
		if (radiovalue1.value == '') {
			uni.showToast({
				title: "请选择回退节点",
				icon: "none",
				duration: 3000
			})
			return;
		}
		let param = infoData.value.forEach(item => {
			if (item.type == '01') {
				return item.data
			}
		});
		rollBack({
			guid: guid.value,
			rollBackNode: radiovalue1.value,
			userName,
			userId,
			procNote: rollBackValue.value,
			data: param
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "回退成功",
					icon: "none",
					duration: 3000
				})
				uni.navigateBack({
					delta: 1,
					refresh: true
				})
				isBack.value = true;
				isSub.value = true;
			} else {
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 3000
				})
			}
			showRollBack.value = false;
		})
	}
	let goToPhrase = () => {
		router.push({
			path: "/setPhrase"
		});
	}
</script>

<style></style>
<style lang="scss" scoped>
	.main-box {
		height: calc(100vh - 45px);
		box-sizing: border-box;
		padding: 0 0 70px;
		background-color: #F5F5F6;


		.scroll-view-box {
			height: calc(100vh - 45px - 70px);
			padding-bottom: 10px;
		}

		.fixed-btn {
			width: 100%;
			left: 0;
			display: flex;
			align-items: center;
			gap: 20px;
			position: fixed;
			bottom: 0;
			padding: 10px 10px;
			border-top: 1px solid #F5F5F5;
			background: #fff;
			box-sizing: border-box;
			height: 60px;
		}
	}

	.slot-content {
		width: 100%;

		.item {
			text-align: center;
			margin-top: 3px;
			padding: 5px;
			color: $uni-color-primary;
			text-decoration: underline;
			cursor: pointer;
		}
	}

	.divider-title {
		font-size: 18px;
		margin: 10px 0;
	}

	.border-box {
		width: 100%;
		padding: 6px 0 6px;
		border-bottom-width: 0.5px !important;
		border-color: #dadbde !important;
		border-bottom-style: solid;
		font-size: 15px;
		min-height: 32px;
		box-sizing: border-box;
	}

	.form-box {
		width: calc(100% - 20px);
		margin: 10px auto;
		background: #fff;
		padding: 10px 20px;
		box-sizing: border-box;
		border-radius: 15px;
	}

	.scroll-view-affix {
		max-height: 300px;
	}

	.conten-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;

		.text {
			text-align: center;
		}
	}


	.link-btn {
		color: $uni-color-primary;
		padding: 5px 0 5px 10px;
		display: inherit;
		width: 100px;
	}
	
	.select-box {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.main-box:deep(.u-form-item__body__right__content__slot) {
		width: 100%;
	}
</style>